<template>
  <div class="roles">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row style="padding: 15px 0;">
      <el-button size="mini" type="primary" icon="el-icon-plus">添加用户</el-button>
    </el-row>
    <el-table :data="rolesData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-row v-for="(item,index) in props.row.children" :key="index">
            <el-col :span="4">
              <el-tag closable @close="delRole(props.row.id,item.id)">{{item.authName}}</el-tag>
              <i class="el-icon-arrow-right"></i>
            </el-col>
            <el-col :span="20">
              <el-row v-for="(_item, _index) in item.children" :key="_index">
                <el-col :span="4">
                  <el-tag closable @close="delRole(props.row.id,_item.id)">{{_item.authName}}</el-tag>
                  <i class="el-icon-arrow-right"></i>
                </el-col>
                <el-col :span="20">
                  <el-tag v-for="(__item, __index) in _item.children" :key="__index" closable @close="delRole(props.row.id,__item.id)">{{__item.authName}}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column label="角色名称" prop="roleName"></el-table-column>
      <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
            @click="delUser(scope.row.id)"
          ></el-button>
          <el-button
            type="success"
            icon="el-icon-check"
            circle
            size="mini"
            @click="showRightsList(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="分配权限" :visible.sync="dialogVisible">
      <el-tree
        ref="tree"
        :data="allRights"
        show-checkbox
        node-key="id"
        :fullscreen="true"
        default-expand-all
        :props="defaultProps"
      ></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateRights">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      rolesData: [],
      dialogVisible: false,
      allRights: [],
      defaultProps: {
        label: "authName"
      },
      choosedRole: null
    };
  },
  methods: {
    //获取角色列表
    getRoles() {
      this.$http("roles").then(res => {
        this.rolesData = res.data;
      });
    },
    //获取所有权限列表
    showRightsList(val) {
      this.choosedRole = val;
      console.log(val);
      this.$http("rights/tree").then(res => {
        this.dialogVisible = true;
        this.allRights = res.data;
        this.$nextTick(() => {
          this.$refs.tree.setCheckedNodes(val.children);
        });
      });
    },
    //修改权限操作
    updateRights() {
      let ridsStr = this.$refs.tree
        .getCheckedKeys()
        .concat(this.$refs.tree.getHalfCheckedKeys())
        .join();
      console.log(ridsStr);
      this.$http(
        `roles/${this.choosedRole.id}/rights`,
        {
          rids: ridsStr
        },
        "post"
      ).then(res => {
        this.$message({
          message: res.meta.msg,
          type: "success"
        });
        this.dialogVisible = false;
        this.getRoles();
      });
    },
    //删除角色
    delRole(roleId, rightId) {
      this.$http(`roles/${roleId}/rights/${rightId}`, {}, "delete").then(
        res => {
          this.$message({
            message: res.meta.msg,
            type: "success"
          });
          this.getRoles();
        }
      );
    },
    delUser(val) {
      this.$confirm("是否删除该用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          this.$http("users/" + val, {}, "delete").then(res => {
            this.$message({
              message: res.meta.msg,
              type: "success"
            });
            this.getRoles();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  created() {
    this.getRoles();
  }
};
</script>

<style scoped lang="scss">
.roles {
  background: #fff;
  border-radius: 5px;
  padding: 15px;
}
</style>
